<template>
    <div class="card-tabs">
      <button
        v-for="it in items"
        :key="it.key"
        type="button"
        class="tab"
        :class="{ active: it.key === modelValue }"
        @click="$emit('update:modelValue', it.key)"
      >
        {{ it.label }}
      </button>
    </div>
  </template>
  
  <script setup>
  defineProps({
    modelValue: { type: String, required: true },
    items: { type: Array, default: () => [] }
  });
  defineEmits(['update:modelValue']);
  </script>
  
  <style scoped>
  .card-tabs{
    display:flex; gap:8px; padding:0 8px;
    border-bottom:1px solid #e5e7eb;
  }
  .tab{
    appearance:none;
    border:1px solid #e5e7eb;
    border-bottom-color:#e5e7eb;
    background:#f6f7f9;
    color:#606266;
    padding:10px 16px;
    border-radius:8px 8px 0 0;
    cursor:pointer;
    transition:all .15s ease;
    font-size:14px;
  }
  .tab:hover{ background:#f9fafb; }
  .tab.active{
    background:#fff; color:#303133;
    border-color:#e5e7eb;
    border-bottom-color:#fff;   /* 关键：下边框设白色，与下面面板拼接 */
    position:relative; z-index:2; /* 关键：盖住下面面板的顶边 */
  }
  </style>
  